<template>
  <a-modal
    :maskClosable="false"
    centered
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    :afterClose="handleAfterClose"
  >
    <template slot="title">
      <span>批量会员设置</span>
      <span class="fz-14 _pl-10" style="color:#1890ff;">已选用户({{ form.memberIds ? form.memberIds.length : 0 }}人)</span>
    </template>

    <div
      style="display: flex;align-items: center; padding: 10px;background-color:#f0fbe7;border-radius: 5px;margin-bottom: 10px;"
    >
      <a-icon type="exclamation-circle" theme="filled" style="color: #f57222;font-size: 18px;" />
      <span style="margin-left: 10px;">如果不填写内容,则不会调整会员原来的设置 </span>
    </div>
    <a-form-model ref="form" :model="form" layout="horizontal">
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="会员职务:">
        <a-select v-model="form.levelId" allowClear placeholder="选择会员职务">
          <a-select-option :value="item.id" v-for="(item, index) in levelList" :key="index">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务专员:">
        <a-select v-model="form.attacheUserId" allowClear placeholder="选择会员职务">
          <a-select-option v-for="item in attache_list" :value="item.id" :key="item.id">
            {{ item.userName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="入会时间:">
        <a-date-picker v-model="form.joinTime" valueFormat="YYYY-MM-DD" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="到期时间:">
        <a-date-picker v-model="form.memberEndTime" valueFormat="YYYY-MM-DD" />
      </a-form-model-item>

      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单位在单位列表展示:">
        <a-select
          v-model="form.companyShow"
          :default-value="undefined"
          style="width: 120px"
          allowClear
          placeholder="请选择"
        >
          <a-select-option :value="1">
            展示
          </a-select-option>
          <a-select-option :value="0">
            不展示
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="负责人在人脉列表展示:">
        <a-select
          v-model="form.leadingShow"
          :default-value="undefined"
          style="width: 120px"
          allowClear
          placeholder="请选择"
        >
          <a-select-option :value="1">
            展示
          </a-select-option>
          <a-select-option :value="0">
            不展示
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="退会:">
        <a-select
          v-model="form.memberState"
          :default-value="undefined"
          style="width: 120px"
          allowClear
          placeholder="请选择"
        >
          <a-select-option :value="1">
            不退会
          </a-select-option>
          <a-select-option :value="0">
            退会
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import { memberPostList } from '@/api/member/memberType'
import { getTagUserList } from '@/api/member/grouping'
import { attacheList, memberLevelGetDownList } from '@/api/system/system'
import { batchUpdateByIdSettingInfo } from '@/api/member/member'

const initForm = () => ({
  memberIds: undefined,
  memberName: undefined,
  memberType: undefined,
  memberLevel: undefined,
  memberPost: undefined,
  memberGroup: undefined,
  memberAttachment: undefined,
  memberStatus: undefined,
  memberRemark: undefined
})
export default {
  components: {},
  data() {
    return {
      id: undefined,
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      confirmLoading: false,
      type: '',
      form: initForm(),
      levelList: [],
      postList: [],
      attache_list: [],
      groupingList: []
    }
  },
  beforeCreate() {},
  created() {},
  methods: {
    show(data) {
      this.form.memberIds = data.memberIds
      this.MemberLevelGetDownList()
      this.getMemberPostList()
      this.getAttacheList()
      this.getGroupingList()
      this.visible = true
    },
    // 会员级别下拉
    async MemberLevelGetDownList() {
      let res = await memberLevelGetDownList()
      this.levelList = res.data || []
    },
    //第二职务下拉数据
    async getMemberPostList() {
      let res = await memberPostList()
      this.postList = res.rows || []
    },
    //服务专员下拉数据
    async getAttacheList() {
      let res = await attacheList({ attacheType: 'hyzy' })
      this.attache_list = res.data || []
    },
    //会员标签下拉数据
    async getGroupingList() {
      let res = await getTagUserList({ type: 0 })
      this.groupingList = res.data || []
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            this.confirmLoading = true
            await batchUpdateByIdSettingInfo(this.form)
            this.$message.success('修改成功')
            this.confirmLoading = false
            this.$emit('refresh')
            this.visible = false
          } catch (error) {
            this.confirmLoading = false
          }
        }
      })
    },
    handleAfterClose() {
      this.form = initForm()
    }
  }
}
</script>
<style lang="less" scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.avatar-uploader > .ant-upload img {
  width: 86px;
  height: 86px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>

<style lang="less">
.poperlay-table {
  .ant-popover-content > .ant-popover-arrow {
    background: #323232;
    border-right-color: #323232;
    border-bottom-color: #323232;
  }
  .ant-popover-inner {
    background: #323232;
  }
  .ant-popover-title {
    color: #fff;
    border-bottom: 1px solid #666664;
  }
  .ant-popover-inner-content {
    color: #fff;
  }
}
</style>
